<template>
  <view
    class="checkout-card"
    @tap="toggleExpand"
  >
    <!-- 顶部：姓名 + 类型 -->
    <view class="header">
      <text class="name">{{ record.customerName }}</text>
      <text :class="['type', typeClass]">{{ typeText }}</text>
    </view>

    <!-- 退住时间 -->
    <view class="info-row">
      <view class="info-item full-width">
        <text class="label">退住时间：</text>
        <text class="value">{{ formatDate(record.checkOutDate) }}</text>
      </view>
    </view>
    
    <!-- 审批时间 -->
    <view class="info-row" v-if="record.approvalDate">
      <view class="info-item full-width">
        <text class="label">审批时间：</text>
        <text class="value">{{ formatDate(record.approvalDate) }}</text>
      </view>
    </view>

    <!-- 审批状态 + 取消审批按钮 -->
    <view class="info-row">
      <view class="info-item full-width">
        <text class="label">审批状态：</text>
        <text :class="['status', statusClass]">{{ statusText }}</text>
        <button
          class="btn-cancel"
          :disabled="record.approvalStatus === 3 || record.approvalStatus === 4"
          @tap.stop.prevent="cancelApproval"
        >取消审批</button>
      </view>
    </view>

    <!-- 退住原因 -->
    <view class="reason-row" v-if="record.reason">
      <text class="label">退住原因：</text>
      <text
        class="value reason"
        :class="expanded ? 'expanded' : 'collapsed'"
      >
        {{ displayReason }}
      </text>
    </view>
  </view>
</template>

<script>
import { updateCheckoutRecord } from '@/api/client'
export default {
  name: 'CheckoutRecordCard',
  props: {
    record: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      expanded: false
    }
  },
  computed: {
    typeText() {
      switch (this.record.type) {
        case 1: return '正常退住'
        case 2: return '死亡退住'
        case 3: return '保留床位'
        default: return '—'
      }
    },
    typeClass() {
      switch (this.record.type) {
        case 1: return 'type-normal'
        case 2: return 'type-death'
        case 3: return 'type-hold'
        default: return ''
      }
    },
    statusText() {
      switch (this.record.approvalStatus) {
        case 1: return '已提交'
        case 2: return '未通过'
        case 3: return '已通过'
        case 4: return '已取消'
        default: return '—'
      }
    },
    statusClass() {
      switch (this.record.approvalStatus) {
        case 1: return 'status-pending'
        case 2: return 'status-reject'
        case 3: return 'status-approved'
        case 4: return 'status-cancel'
        default: return ''
      }
    },
    displayReason() {
      const r = this.record.reason || ''
      if (!this.expanded && r.length > 15) {
        return r.slice(0, 15) + '…'
      }
      return r
    }
  },
  methods: {
    formatDate(dt) {
      if (!dt) return '—'
      const d = new Date(dt)
      const pad = n => String(n).padStart(2, '0')
      return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())} ` +
             `${pad(d.getHours())}:${pad(d.getMinutes())}`
    },
    toggleExpand() {
      this.expanded = !this.expanded
    },
    async cancelApproval() {
      // 如果已通过，则不执行
      if (this.record.approvalStatus === 3) return
      const confirmed = await new Promise(resolve => {
        uni.showModal({
          title: '取消审批',
          content: '确认要取消审批吗？',
          success: res => resolve(res.confirm)
        })
      })
      if (!confirmed) return
      try {
        await updateCheckoutRecord({
          checkOutId: this.record.checkOutId,
          approvalStatus: 4
        })
        uni.showToast({ title: '已取消审批' })
        // 更新本地状态
        this.$emit('updated')
      } catch (e) {
        uni.showToast({ title: '取消失败，请重试', icon: 'none' })
      }
    }
  }
}
</script>

<style scoped>
.checkout-card {
  background-color: #fff;
  border-radius: 12px;
  padding: 16px;
  margin: 12px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom:12px; }
.name { font-size:18px; font-weight:600; color:#333; }
.type { font-size:14px; padding:2px 8px; border:1px solid; border-radius:8px; }
.type-normal { color:#00c3b0; border-color:#00c3b0; }
.type-death  { color:#e60012; border-color:#e60012; }
.type-hold   { color:#ffa500; border-color:#ffa500; }

.info-row { display:flex; flex-wrap:wrap; margin-bottom:8px; }
.info-item { flex:1 1 100%; display:flex; align-items:center; margin-bottom:4px; }
.info-item.full-width { flex:1 1 100%; }
.label { width:80px; font-size:14px; color:#666; }
.value { flex:1; font-size:14px; color:#444; }

.reason-row { margin:8px 0; border-top:1px solid #eee; padding-top:8px; }
.value.reason.collapsed {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.value.reason.expanded {
  white-space: normal;
  overflow-y: auto;
  line-height: 1.4em;
  max-height: 4.2em;
}

.status {
  font-size:14px; padding:2px 6px; border-radius:6px; color:#fff; margin-left:4px;
}
.status-pending   { background-color:#ffaa00; }
.status-reject    { background-color:#e60012; }
.status-approved  { background-color:#00c3b0; }
.status-cancel    { background-color:#999; }

.btn-cancel {
  display: inline-flex;        /* 或 block/flex，根据你的布局 */
  align-items: center;         /* 垂直居中 */
  justify-content: center;     /* 水平居中，可选 */
  margin-left: 90px;
  height: 25px;
  padding: 0 12px;             /* 左右内边距，自行调整 */
  font-size: 14px;
  border-radius: 6px;
  background-color: #ea656e;
  color: #fff;
}

.btn-cancel[disabled] {
  background-color: #ccc;
}
</style>
